<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <style>
        li{
            list-style: none;
        }
        a{
            color: black;
            text-decoration: none;
        }
        ul#top{

        }
        .f{
            display: flex;
            flex-wrap: wrap;

        }
        ul#top .child{
            display: none;
        }
    </style>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            $(".parentsec").click(function () {
                $(this).parent().siblings().find("ul").hide(100);
                $(this).next().show(600);
            });
        });
    </script>
</head>
<body>
  <h2>请选择技能点</h2>
 <div id="sections">
     <ul id="top">
         <c:forEach items="${sections}" var="s">
         <li class="f">
             <h3 style="cursor: pointer" class="parentsec">${s.sectionname}</h3>
             <ul class="child">
                 <c:forEach items="${s.children}" var="s2">
                     <li><a href="generateQuiz.stu?secid=${s2.id}" target="_blank">${s2.sectionname}</a></li>
                 </c:forEach>
             </ul>
         </li>
         </c:forEach>
     </ul>
 </div>
</body>
</html>
